<template>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import service from '../../../ulit/service'

const arr: any = []
const arr1: any = []

onMounted(() => {
    service({
        url: 'data/simpleData'
    }).then(res => {
        if (res.data.code === '200') {
            res.data.data.forEach((item: any) => {
                arr.push(item.x)
                arr1.push(item.val)
            })
            // console.log(arr)
            // console.log(arr1)
        }
    }).then(() => {
        aa()
    })

})
// 基于准备好的dom，初始化echarts实例
const aa = () => {
    var myChart = echarts.init(document.getElementById('main') as HTMLElement);
    // 绘制图表
    myChart.setOption({
        title: {
            text: 'ECharts数据分析'
        },
        tooltip: {},
        xAxis: {
            data: arr
        },
        yAxis: {},
        series: [
            {
                type: 'line',
                data: arr1
            }
        ]
    });

}

</script>

<style scoped>
#main {
    width: 900px;
    height: 450px;
    margin: auto;
}
</style>